<template>
  <div>
    <!-- alert警示框 -->
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon />

    <!-- 选择商品分类区域 -->
    <el-row align="middle" style="margin:20px 0px">
      <span>请选择商品分类：</span>
      <!-- 选择商品分类的 cascader 级联选择器 :options用来指定数据源 -->
      <el-cascader v-model="params.currentChecked" :options="params.categoryList" clearable :props="{
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      }" @change="cascaderHandleChange"></el-cascader>
    </el-row>

    <!-- tabs 标签页 -->
    <el-tabs v-model="params.activeName">

      <el-tab-pane label="动态参数" name="many">
        <!-- button 按钮 -->
        <el-button type="primary" :disabled="params.btnDisabled" @click="addDialog">
          添加参数
        </el-button>
        <!-- table 表格 -->
        <el-table :data="params.manyTableData" border stripe style="margin:15px 0">
          <el-table-column type="expand">
            <template v-slot="scope">
              <!-- tag 标签 -->
              <el-tag effect="plain" v-for="(item, i) in scope.row.attr_vals" :key="i" closable
                @close="handleClose(scope.row, i)" @click="showInput(scope.row)" style="margin:10px">
                {{ item }}
              </el-tag>
              <!-- input 输入框 -->
              <el-input v-if="params.inputShow" v-model="params.newTag" ref="tagInputRef" size="small"
                @keyup.enter="handleInputConfirm(scope.row)" @blur="handleInputBlur" style="margin:10px;width:100px">
              </el-input>
              <!-- button 按钮 -->
              <el-button v-else type="success" size="small" @click="showInput(scope.row)"
                style="margin:10px;width:100px">
                + 新增tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作" min-width="170" fixed="right">
            <template v-slot="scope">
              <el-button plain icon="Edit" type="primary" size="small" @click="editDialog(scope.row)">
                编辑
              </el-button>
              <el-button plain icon="Delete" type="danger" size="small" @click="deleteParams(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="静态属性" name="only">
        <!-- button 按钮 -->
        <el-button type="primary" :disabled="params.btnDisabled" @click="addDialog">
          添加属性
        </el-button>
        <!-- table 表格 -->
        <el-table :data="params.onlyTableData" border stripe style="margin:15px 0">
          <el-table-column type="expand">
            <template v-slot="scope">
              <!-- tag 标签 -->
              <el-tag effect="plain" v-for="(item, i) in scope.row.attr_vals" :key="i" closable
                @close="handleClose(scope.row, i)" @click="showInput(scope.row)" style="margin:10px">
                {{ item }}
              </el-tag>
              <!-- input 输入框 -->
              <el-input v-if="params.inputShow" v-model="params.newTag" ref="tagInputRef" size="small"
                @keyup.enter="handleInputConfirm(scope.row)" @blur="handleInputBlur" style="margin:10px;width:100px">
              </el-input>
              <!-- button 按钮 -->
              <el-button v-else type="success" size="small" @click="showInput(scope.row)"
                style="margin:10px;width:100px">
                + 新增tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="属性名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button plain icon="Edit" type="primary" size="small" @click="editDialog(scope.row)">
                编辑
              </el-button>
              <el-button plain icon="Delete" type="danger" size="small" @click="deleteParams(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>

    <!--添加参数/属性的 dialog 对话框 -->
    <el-dialog v-model="params.addDialogVisible" :title="'添加' + titleText" width="50%" @close="dialogClose">
      <!-- 添加参数/属性的 form 表单 -->
      <el-form :model="params.addParams" :rules="addRules" ref="addFormRef" label-position="top">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="params.addParams.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="params.addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addParams">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改参数/属性的 dialog 对话框 -->
    <el-dialog v-model="params.editDialogVisible" :title="'修改' + titleText" width="50%" @close="dialogClose">
      <!-- 修改参数/属性的 form 表单 -->
      <el-form :model="params.editParams" :rules="editRules" ref="editFormRef" label-position="top">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="params.editParams.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="params.editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editParams">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useStore from '@/pinia/index.js';
import { ref, reactive, computed, nextTick } from "vue";
const { params } = useStore();
// 获取商品分类列表请求
params.REQUEST_categoryList();
// tag 输入框对象
const tagInputRef = ref()
// 新增 tag 按钮
const showInput = () => {
  params.inputShow = true;//显示input
  // dom渲染完成后获取input的dom对象
  nextTick(() => {
    tagInputRef.value.focus();//聚焦input
  });
}
// 新增 tag 事件
const handleInputConfirm = (row) => {
  // input框的值不为空
  if (params.newTag.trim().length !== 0) {
    // 将新标签添加到数组中
    row.attr_vals.push(params.newTag);
    // 解构
    const { cat_id, attr_id, attr_name, attr_sel, attr_vals } = row;
    // 赋值
    params.editParams = {
      id: cat_id,
      attrId: attr_id,
      attr_name,
      attr_sel,
      attr_vals: attr_vals.join(',')
    }
    params.REQUEST_editParams();
  }
  params.inputShow = false;//隐藏input
  console.log(params.editParams);
}
// 新增 tag 的 blur 事件
const handleInputBlur = () => {
  params.inputShow = false;//隐藏input
  // 清空 input 框的值
  params.newTag = '';
}
// 删除 tag 事件
const handleClose = (row, i) => {
  // 从数组中删除该标签
  row.attr_vals.splice(i, 1)
  // 解构
  const { cat_id, attr_id, attr_name, attr_sel, attr_vals } = row;
  // 赋值
  params.editParams = {
    id: cat_id,
    attrId: attr_id,
    attr_name,
    attr_sel,
    attr_vals: attr_vals.join(',')
  }
  params.REQUEST_editParams();
}
// 计算属性，动态标题
const titleText = computed(() => {
  if (params.activeName === 'only') {
    return '静态属性';
  } else {
    return '动态参数';
  }
});
// 表单验证对象
const addFormRef = ref()
const editFormRef = ref()
// 表单验证规则
const addRules = reactive({
  attr_name: [
    { required: true, message: '请输入参数名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
})
const editRules = reactive({
  attr_name: [
    { required: true, message: '请输入参数名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
})
// 分类选择器的change事件
const cascaderHandleChange = () => {
  // 判断当前有没有选择商品分类
  if (params.currentChecked !== null) {
    //选中的不是三级分类，清空数据
    if (params.currentChecked.length !== 3) {
      params.currentChecked = []
    } else {
      // 获取动态参数和静态属性列表
      params.REQUEST_onlyAttributeList();
      params.REQUEST_manyAttributeList();
      if (params.manyTableData !== null && params.onlyTableData !== null) {
        params.btnDisabled = false;//按钮可用
      }
    }
  } else {
    params.manyTableData = []
    params.onlyTableData = []
    params.btnDisabled = true;//按钮不可用
  }
}
// 删除操作
const deleteParams = (row) => {
  params.REQUEST_deleteParams(row.attr_id);
}
// 编辑操作
const editDialog = (row) => {
  params.editDialogVisible = true;
  // 解构
  const { cat_id, attr_id, attr_name, attr_sel } = row;
  // 赋值
  params.editParams = {
    id: cat_id,
    attrId: attr_id,
    attr_name,
    attr_sel,
  }
}
// 添加操作
const addDialog = () => {
  params.addDialogVisible = true;
  params.addParams.attr_sel = params.activeName;
}
// 添加参数/属性请求
const addParams = () => {
  addFormRef.value.validate(valid => {
    if (valid) {
      params.REQUEST_addParams();
    } else {
      return false;
    }
  })
}
// 修改参数/属性请求
const editParams = () => {
  editFormRef.value.validate(valid => {
    if (valid) {
      params.REQUEST_editParams();
    } else {
      return false;
    }
  })
}
// 关闭dialog事件
const dialogClose = () => {
  params.addParams.attr_name = '';//清空输入框的值
}
</script>

<style scoped>
</style>